---
title: Tailwind CSS
description: Learn how to use Tailwind CSS in a Turborepo.
---

import { Tabs, Tab } from 'fumadocs-ui/components/tabs';
import { Callout } from '#components/callout';
import { Steps, Step } from '#components/steps';

[Tailwind CSS](https://tailwindcss.com/) is a CSS framework that allows you to rapidly build modern websites without ever leaving your HTML.

## Quickstart

If you'd rather use a template, this guide is walking through how to build [this Tailwind CSS + Turborepo template](https://github.com/vercel/turborepo/tree/main/examples/with-tailwind).

<Tabs groupId="package-manager" items={['pnpm', 'yarn', 'npm', 'bun']} persist>

<Tab value="pnpm">

```bash title="Terminal"
pnpm dlx create-turbo@latest -e with-tailwind
```

</Tab>

<Tab value="yarn">

```bash title="Terminal"
yarn dlx create-turbo@latest -e with-tailwind
```

</Tab>

<Tab value="npm">

```bash title="Terminal"
npx create-turbo@latest -e with-tailwind
```

</Tab>

<Tab value="bun">

```bash title="Terminal"
bunx create-turbo@latest -e with-tailwind
```

</Tab>
</Tabs>

## Guide

<Callout type="info">This guide is for Tailwind CSS v4.</Callout>

<Steps>
<Step>

### Create a monorepo

If you don't have an existing project, use [create-turbo](/docs/getting-started/installation) to create a new monorepo:

<Tabs groupId="package-manager" items={['pnpm', 'yarn', 'npm', 'bun']} persist>

<Tab value="pnpm">

```bash title="Terminal"
pnpm dlx create-turbo@latest
```

</Tab>

<Tab value="yarn">

```bash title="Terminal"
yarn dlx create-turbo@latest
```

</Tab>

<Tab value="npm">

```bash title="Terminal"
npx create-turbo@latest
```

</Tab>

<Tab value="bun">

```bash title="Terminal"
bunx create-turbo@latest
```

</Tab>
</Tabs>

</Step>

<Step>

### Add Tailwind CSS to your application

[Follow Tailwind CSS's guides](https://tailwindcss.com/docs/installation/using-vite) to set up Tailwind CSS for your frontend framework.

Once completed, you can start working on bringing your UI package into the applications.

</Step>

<Step>

### Create a shared Tailwind CSS configuration package

First, build an [Internal Package](https://turborepo.com/docs/core-concepts/internal-packages) with four files:

<Tabs items={["package.json", "shared-styles.css", "postcss.config.js (Optional)"]}>

<Tab value="package.json">

This `package.json` installs Tailwind CSS so we can create the file shared styles and export for the rest of the repository.

```json title="./packages/tailwind-config/package.json"
{
  "name": "@repo/tailwind-config",
  "version": "0.0.0",
  "type": "module",
  "private": true,
  "exports": {
    ".": "./shared-styles.css",
    "./postcss": "./postcss.config.js"
  },
  "devDependencies": {
    "postcss": "^8.5.3",
    "tailwindcss": "^4.1.5"
  }
}
```

</Tab>

<Tab value="shared-styles.css">

This `shared-styles.css` file will be shared to the libraries and applications in the repository. The variables shown will be available anywhere that the file is included.

```css title="./packages/tailwind-config/shared-styles.css"
@import 'tailwindcss';

@theme {
  --blue-1000: #2a8af6;
  --purple-1000: #a853ba;
  --red-1000: #e92a67;
}
```

</Tab>

<Tab value="postcss.config.js (Optional)">

If your frontends need a PostCSS configuration file, you can create one to share.

```js title="./packages/tailwind-config/postcss.config.js"
export const postcssConfig = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};
```

</Tab>
</Tabs>

</Step>

<Step>

### Create the UI package

You can now build the components to share to your applications.

For a full example, [visit the source code for `@repo/ui` package in the Tailwind CSS example](https://github.com/vercel/turborepo/tree/main/examples/with-tailwind/packages/ui). The files required for your Tailwind CSS setup are below.

<Tabs items={["package.json", "turbo.json", "styles.css"]}>

<Tab value="package.json">

The `package.json` installs the dependencies for the package, sets up scripts for development and build environments, and marks the exports for the package.

```json title="./packages/ui/package.json"
{
  "exports": {
    "./styles.css": "./dist/index.css",
    "./*": "./dist/*.js"
  },
  "scripts": {
    "build:styles": "tailwindcss -i ./src/styles.css -o ./dist/index.css",
    "build:components": "tsc",
    "dev:styles": "tailwindcss -i ./src/styles.css -o ./dist/index.css --watch",
    "dev:components": "tsc --watch"
  },
  "devDependencies": {
    "@repo/tailwind-config": "workspace:*",
    "@tailwindcss/cli": "^4.1.5",
    "@tailwindcss/postcss": "^4.1.5",
    "autoprefixer": "^10.4.20",
    "tailwindcss": "^4.1.5"
  }
}
```

<Callout type="good-to-know">
  Above, we've only included the code related to setting up Tailwind. The full
  package.json is
  [here](https://github.com/vercel/turborepo/tree/main/examples/with-tailwind/packages/ui/package.json).
</Callout>

</Tab>

<Tab value="turbo.json">

Create a `build` and `dev` task that runs the scripts for building of components and style sheets in parallel.

```json title="./packages/ui/turbo.json"
{
  "extends": ["//"],
  "tasks": {
    "build": {
      "dependsOn": ["build:styles", "build:components"]
    },
    "build:styles": {
      "outputs": ["dist/**"]
    },
    "build:components": {
      "outputs": ["dist/**"]
    },
    "dev": {
      "with": ["dev:styles", "dev:components"]
    },
    "dev:styles": {
      "cache": false,
      "persistent": true
    },
    "dev:components": {
      "cache": false,
      "persistent": true
    }
  }
}
```

</Tab>

<Tab value="styles.css">

This `styles.css` contains component-level styles for the shared UI library.

```css title="./packages/ui/src/styles.css"
/* Component-level styles for the UI package */
@import 'tailwindcss' prefix(ui);
```

<Callout type="info">
  Tailwind classes used in this package should be prefixed with `ui:` to avoid
  style specificity issues.
</Callout>

</Tab>

</Tabs>

</Step>
<Step>

### Use the UI package in an application

Install the packages you've created into your application.

<Tabs groupId="package-manager" items={['pnpm', 'yarn', 'npm', 'bun']} persist>

<Tab value="pnpm">

```bash title="Terminal"
pnpm add @repo/ui @repo/tailwind-config --save-dev --filter=@repo/ui --filter=web
```

</Tab>

<Tab value="yarn">

```bash title="Terminal"
yarn workspace web add @repo/ui @repo/tailwind-config --dev
yarn workspace @repo/ui add @repo/ui @repo/tailwind-config --dev
```

</Tab>

<Tab value="npm">

```bash title="Terminal"
npm install @repo/ui @repo/tailwind-config --workspace=web --workspace=@repo/ui --save-dev
```

</Tab>

<Tab value="bun">

```bash title="Terminal"
bun install @repo/ui @repo/tailwind-config --dev --filter=@repo/ui --filter=web
```

</Tab>
</Tabs>

Then, configure the files in your application so the styles from the UI package are reflected in the application.

<Tabs items={["globals.css", "layout.tsx", "postcss.config.js (Optional)"]}>

<Tab value="globals.css">

```css title="./apps/web/app/globals.css"
@import 'tailwindcss';
@import '@repo/tailwind-config';
```

</Tab>

<Tab value="layout.tsx">

```tsx title="./apps/web/app/layout.tsx"
import '@repo/ui/styles.css';
import './globals.css';
```

</Tab>

<Tab value="postcss.config.js (Optional)">

```js title="./apps/web/postcss.config.js"
import { postcssConfig } from '@repo/tailwind-config/postcss';

export default postcssConfig;
```

</Tab>

</Tabs>

</Step>

</Steps>
